<template>
   <div class="page-box">
      <div class="page-title">
         {{ "付款审批" }}
      </div>

      <div class="page-search">
         <div
            class="search-box flex_start_center"
            :style="{ height: IsHeight }"
         >
            <el-input
               v-model="search"
               placeholder="订单类型/采购单/出库退货单"
               style="width: 200px; margin-right: 10px; margin-bottom: 10px"
               suffix-icon="Search"
            />
            <div
               class="search-box-item flex_center_center"
               style="transform: translateY(-5px)"
            >
               <span class="margin-right-10">显示:</span>
               <el-button color="#172B4D"> 未付款 </el-button>
               <el-button color="">部分付款</el-button>
            </div>
         </div>

         <div class="search-btn">
            <div
               class="btn_item"
               @click="handleClickHeight"
            >
               <img
                  class="btn_img"
                  src="@/assets/sx.png"
                  alt=""
               />
               <span> 高级筛选 </span>
            </div>
         </div>
      </div>
      <div class="search-btn-right"></div>
   </div>

   <div class="table-box">
      <el-table
         :data="tabeData"
         style="width: 100%"
         v-loading="loading"
         border
         default-expand-all
      >
         <el-table-column
            align="center"
            prop="rowNumber"
            label="付款单号"
            width="180"
         />
         <el-table-column
            align="center"
            prop="code"
            label="本次付款金额"
            width="180"
         />
         <el-table-column
            align="center"
            prop="house_type_name"
            label="付款日期"
            width="180"
         />
         <el-table-column
            align="center"
            prop="category_name"
            label="付款方式"
            width="240"
         />
         <el-table-column
            align="center"
            prop="manager"
            label="备注"
            width="180"
         />
         <el-table-column
            align="center"
            prop="phone"
            label="订单类型"
            width="120"
         />
         <el-table-column
            align="center"
            prop="phone"
            label="采购单/出库退货单"
            width="180"
         />
         <el-table-column
            align="center"
            prop="phone"
            label="采购/退货日期"
            width="120"
         />
         <el-table-column
            align="center"
            prop="phone"
            label="供应商/客户"
            width="120"
         />
         <el-table-column
            align="center"
            prop="phone"
            label="总金额(元)"
            width="120"
         />
         <el-table-column
            align="center"
            prop="phone"
            label="待付款金额(元)"
            width="120"
         />
         <el-table-column
            align="center"
            prop="phone"
            label="提交人"
            width="120"
         />
         <el-table-column
            align="center"
            prop="phone"
            label="提交时间"
            width="120"
         />
         <el-table-column
            align="center"
            prop="phone"
            label="操作"
            width="120"
            fixed="right"
         >
            <template #default="scope">
               <el-button size="small" @click="handleClickPaymentApproval(scope.row)"> 付款审批 </el-button>
            </template>
         </el-table-column>
      </el-table>
   </div>

   <!-- 分页 -->
   <Pagination
      class="pagination"
      @pageSize="pageSize"
      @getPage="getPage"
      :page="pageData.page"
      :page-size="pageData.pageSize"
      :total="total"
   />
   <PaymentApproval ref="paymentApprovalRef" />
</template>

<script setup lang="ts">
   import { ref, onMounted, watch } from "vue";
   import PaymentApproval from "./components/PaymentApproval.vue";
   import Pagination from "@/components/Pagination.vue";
   import { ElMessageBox, ElMessage } from "element-plus";
   import api from "@/api";
   const paymentApprovalRef = ref<InstanceType<typeof PaymentApproval>>();
   // 定义仓库数据类型
   interface Warehouse {
      id: string | number;
      title: string;
      code: string;
      house_type?: string;
      house_type_name?: string;
      category_name?: string;
      manager?: string;
      phone?: string;
      address?: string;
      remark?: string;
      parent_id?: string | number;
      parent_name?: string;
      children?: Warehouse[];
      create_time?: string;
      creator?: string;
      rowNumber?: number;
   }
   const DetailsVisible = ref<boolean>(false);

   let IsHeight = ref<number | string>(0);
   const isShow = ref<boolean>(false);
   const search = ref<string>("");
   let dialogType = ref<string>("");
   let dialogRow = ref<Warehouse>({} as Warehouse);
   const pageData = ref({
      pageSize: 10,
      page: 1,
      house_type: "",
      category: "",
      keywords: "",
   });
   const total = ref(0);
   const tabeData = ref<Warehouse[]>([]);
   // 侦听动态分页
   watch(
      () => {
         return pageData.value;
      },
      () => {
         getAlltabeData();
      },
      { deep: true }
   );

   // 搜索关键词监听
   watch(
      () => search.value,
      (newVal) => {
         pageData.value.keywords = newVal;
         pageData.value.page = 1;
      }
   );

   const handleClickDetails = (row: Warehouse) => {
      console.log("xsxqq");
      DetailsVisible.value = true;
      dialogRow.value = row;
   };

   const handleClickPaymentApproval = (row: Warehouse) => {
      paymentApprovalRef.value?.open();
   };

   let nub = ref<number>(0);
   const handleClickHeight = () => {
      nub.value++;
      if (nub.value % 2 == 1) {
         IsHeight.value = "34px";
      } else {
         IsHeight.value = "0px";
      }
   };

   const pageSize = (e: number) => {
      pageData.value.pageSize = e;
   };
   const getPage = (e: number) => {
      pageData.value.page = e;
   };
   onMounted(() => {
      getAlltabeData();
   });

   // 设置行样式
   const tableRowClassName = ({ row }: { row: Warehouse }) => {
      if (row.parent_id) {
         return "sub-warehouse-row";
      }
      return "";
   };

   // 获取仓库列表
   const getAlltabeData = async () => {
      loading.value = true;
      try {
         const res = await api.parking.getAll({
            ...pageData.value,
         });

         //模拟数据
         tabeData.value = [
            {
               id: 1,
               title: "主仓库",
               code: "123456",
               house_type_name: "仓库类型",
               category_name: "仓库类别",
               manager: "库管人员",
               phone: "联系电话",
               address: "仓库地址",
               remark: "备注",
               children: [
                  {
                     id: 2,
                     title: "子仓库",
                     code: "123456",
                     house_type_name: "仓库类型",
                     category_name: "仓库类别",
                  },
                  {
                     id: 3,
                     title: "子仓库",
                     code: "123456",
                     house_type_name: "仓库类型",
                     category_name: "仓库类别",
                  },
               ],
               create_time: "2021-01-01",
               creator: "创建人",
            },
         ];
      } catch (error) {
         console.error("获取仓库列表失败", error);
      } finally {
         loading.value = false;
      }
   };

   const loading = ref(false);

   // 编辑仓库
   const handleClickEdit = (row: Warehouse) => {
      dialogType.value = row.parent_id ? "editSub" : "edit";
      dialogRow.value = { ...row } as Warehouse;
      isShow.value = true;
   };

   // 删除仓库
   const handleClickDelete = (row: Warehouse) => {
      ElMessageBox.confirm(
         `确定要删除${row.parent_id ? "子" : ""}仓库"${row.title}"吗？${
            !row.parent_id && row.children && row.children.length > 0 ? "删除后将同时删除其下所有子仓库。" : ""
         }`,
         "提示",
         {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
         }
      )
         .then(async () => {
            try {
               // 这里调用删除API
               const res = await api.parking.delete(row.id);
               if (res.code === 0) {
                  ElMessage.success("删除成功");
                  getAlltabeData();
               } else {
                  ElMessage.error(res.msg || "删除失败");
               }
            } catch (error) {
               ElMessage.error("删除失败");
            }
         })
         .catch(() => {});
   };

   // 提交表单回调
   const handleSubmit = () => {
      getAlltabeData();
   };
</script>

<style lang="scss" scoped>
   .btn-box {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      gap: 5px;
   }

   .main-warehouse {
      font-weight: bold;
      color: #333;
   }

   // 输入框样式
   :deep(.el-input__wrapper) {
      background-color: rgba(250, 252, 251, 1);
   }

   //表格样式
   :deep(.el-table) {
      --el-table-header-bg-color: rgba(235, 236, 240, 1);
   }

   :deep(.el-table thead) {
      color: #444;
   }

   // 子仓库行样式
   :deep(.sub-warehouse-row) {
      background-color: #fef6e5;
   }

   //分页样式
   .pagination {
      width: calc(100% - 250px);
      position: fixed;
      bottom: 20px;
      right: 20px;
      padding-top: 10px;
      border-top: 1px solid #98989848;
   }

   :deep(.el-pagination.is-background .el-pager li.is-active) {
      background-color: #000 !important;
   }
</style>
